<div class="page-header">
	<h1>{{ctrl.probe.name}}<span class="collector_icon public"><i ng-class="icon" class="icon-gf icon-gf-raintank_icn" style="" ng-if="ctrl.probe.public" bs-tooltip="'This is a public probe'"></i></span>
		<span class="collector_icon private"><i ng-class="icon" class="icon-gf icon-gf-private-collector" style="" ng-if="!ctrl.probe.public" bs-tooltip="'This is a private probe'"></i></span><a ng-click="ctrl.gotoDashboard(ctrl.probe)"><i ng-class="icon" class="icon-gf icon-gf-dashboard" bs-tooltip="'Go to probe summary </br>dashboard for this probe'"></i></a></h1>
    <div class="gf-form wp-tag-margin--bottom">
    	<span class="gf-form-label width-6">Tags:</span>
		<bootstrap-tagsinput ng-model="ctrl.probe.tags" tagclass="label rt-label-tag" placeholder="New Tag" on-tags-updated="ctrl.save()" ></bootstrap-tagsinput>
	</div>

	<div class="page-header-tabs">
		<ul class="gf-tabs">
			<li class="gf-tabs-item">
				<a class="gf-tabs-link active" href="#">
					Status
				</a>
			</li>
		</ul>
	</div>
</div>



<div class="row">
	<div class="col-md-6">
		<div class="max-width-32">
			<h5 class="page-headering playlist-column-header">Probe Details</h5>
			<div>
				<div ng-show="ctrl.probe.online" class="collectorCurrentStatus">
					<div class="rt-summary-status">
						<span class="{{ctrl.probe.online?'online':'offline'}} jumbo"> {{ctrl.probe.online?'online':'offline'}}</span>
					  <span class="checkTime">&nbsp; {{ctrl.probe.online_change | timeDuration}}</span>
					</div>
					<div class="collectorStatus">
						<div class="pull-left msg">This probe is <span ng-class="{disabled: !ctrl.probe.enabled, enabled: ctrl.probe.enabled}">{{ctrl.probe.enabled? "enabled": "disabled"}}</span>.</div>
					  <span class="checkTime">&nbsp; {{ctrl.probe.enabled_change | timeDuration}}</span>
						<button type="submit" ng-if="!ctrl.probe.public" class="pull-right tertiaryCTA" ng-click="ctrl.setEnabled(!ctrl.probe.enabled)" ng-hide="ctrl.probe.enabled">Enable</button>
						<button type="submit" ng-if="!ctrl.probe.public" class="pull-right tertiaryCTA" ng-click="ctrl.setEnabled(!ctrl.probe.enabled)" ng-show="ctrl.probe.enabled">Disable</button>
					</div>
					<!-- <button type="submit" class="secondaryCTA">View All Errors</button> -->
					<div class="clearfix"></div>
				</div>
				<div ng-show="!ctrl.probe.online" class="collectorCurrentStatus">
					<div class="rt-summary-status">
						<div class="collector-animation" id="collector-animation">
							<div class="collector collector-1"></div>
						    <div class="collector collector-2"></div>
						    <div class="collector collector-3"></div>
						    <div class="collector collector-4"></div>
						    <div class="collector collector-5"></div>
						</div>
						<h5 class="disabled">LOOKING FOR SIGNS OF LIFE
							<span class="ascii-ellipses-1"></span>
							<span class="ascii-ellipses-2">.&nbsp;</span>
							<span class="ascii-ellipses-3">&nbsp;.</span>
							<span class="ascii-ellipses-4">&nbsp;&nbsp;.</span>
						</h5>
						<p>We havent seen this probe appear online yet.</p>
						<p>Still need to install it? <a href="plugins/raintank-worldping-app/page/probe-create?probe={{ctrl.probe.id}}" class="highlight-word">Read the installation instructions</a></p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-5 offset-md-1">
		<div class="max-width-32">
			<h5 class="page-headering playlist-column-header">Configuration</h5>
            <div class="gf-form">
              <label class="gf-form-label width-7">Probe Name</label>
			  <input type="text" class="gf-form-input max-width-15" ng-model="ctrl.probeUpdates.name" required="" ng-disabled="ctrl.probe.public">
            </div>
			<div class="gf-form-button-row">
				<!-- <a class="btn btn-success " ng-click="ctrl.update()" ng-if="ctrl.probe.id">Update Probe</a> -->
				<button class="btn btn-secondary" ng-click="ctrl.update()" ng-if="ctrl.probe.id && !ctrl.probe.public">Update Probe</button>
			</div>
		</div>
	</div>
</div>

<div class="row gf-form-group">
	<div class="col-md-12">
		<div class="max-width-32">
			<h5 class="page-headering playlist-column-header">Probe Events: Last 24 Hours
				<div style="float: right; display: inline;">
					<div style="display: inline; margin-right: 15px;">
						<a ng-click="ctrl.gotoEventDashboard(ctrl.probe)"><i ng-class="icon" class="icon-gf icon-gf-dashboard" style="vertical-align: super;"></i><span class="disabled small" style="vertical-align: text-top;">&nbsp;Go to worldPing: Events dashboard</span></a>
					</div>
				</div>
			</h5>
			<div class="panel-iframe-container">
				<div class="panel-iframe-container-bg">
					<iframe ng-src="{{ctrl.getEventsDashboardLink(ctrl.probe)}}" width="100%" height="250" frameborder="0"></iframe>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row gf-form-group" ng-if="ctrl.probe.id && !ctrl.probe.public">
	<div class="col-md-12">
		<div class="max-width-32">
			<div ng-include src="'public/plugins/raintank-worldping-app/components/probe/partials/destroyProbe.html'"></div>
		</div>
	</div>
</div>

<!-- 		<div class="detailContainer" ng-show="ctrl.collector.online">
			<div class="detailColumn detailFull">
				<div class="rt-box">
					<div class="rt-box-header">Probe Events: Last 24 Hours
						<div style="float: right; display: inline;">
							<div style="display: inline; margin-right: 15px;">
								<a ng-click="ctrl.gotoEventDashboard(collector)"><i ng-class="icon" class="icon-gf icon-gf-dashboard"></i><span class="disabled small" style="vertical-align: text-top;">&nbsp;Go to worldPing: Events dashboard</span></a>
							</div>
						</div>
					</div>
					<div class="rt-box-body no-padding">
						<div class="panel-iframe-container">
							<div class="panel-iframe-container-bg">
								<iframe ng-src="{{ctrl.getEventsDashboardLink(ctrl.collector)}}" width="100%" height="501" frameborder="0"></iframe>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div> -->
